<template>
    <div class="operation">
      <a @click="addBrotherItem(index, item)" v-if="item.projectId !== 0" title="同级 +" v-buttons="buttons" @button-click="handleButtonClick">
        <el-icon><ArrowRightBold /></el-icon>
      </a>
      <span v-if="item.projectId !== 0">|</span>
      <a @click="addChildItem(index, item)" title="子级 + ">
        <el-icon><ArrowDownBold /></el-icon>
      </a>
      <span>|</span>
      <a @click="editItem(index, item)" title="编辑">
        <el-icon><EditPen /></el-icon>
      </a>
      <span>|</span>
      <a @click="deleteItem(index, item)" title="删除">
        <el-icon><DeleteFilled /></el-icon>
      </a>
      <span v-if="item.children && item.children.length">|</span>
      <a v-if="item.children && item.children.length" @click="toggleExpand(index, item)" title="收起/展开">
        <el-icon v-if="item.expanded"><CaretTop /></el-icon>
        <el-icon v-else><CaretBottom /></el-icon>
      </a>
      <span>|</span>
      <el-popover placement="bottom" :width="240" trigger="hover">
        <template #reference>
          <div class="item-btn">
            <a title="更多"><el-icon><Clock /></el-icon></a>
          </div>
        </template>
        <div class="item-info">
          <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
          <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
        </div>
      </el-popover>
    </div>
  </template>
  
  <script>
  import { defineComponent } from 'vue';
  import { ArrowRightBold, ArrowDownBold, EditPen, DeleteFilled, CaretTop, CaretBottom, Clock } from '@element-plus/icons-vue';
  
  export default defineComponent({
    name: 'OperationButtons',
    components: {
      ArrowRightBold,
      ArrowDownBold,
      EditPen,
      DeleteFilled,
      CaretTop,
      CaretBottom,
      Clock,
    },
    props: {
      index: {
        type: Number,
        required: true,
      },
      item: {
        type: Object,
        required: true,
      },
    },
    methods: {
      addBrotherItem(index, item) {
        this.$emit('add-brother-item', index, item);
      },
      addChildItem(index, item) {
        this.$emit('add-child-item', index, item);
      },
      editItem(index, item) {
        this.$emit('edit-item', index, item);
      },
      deleteItem(index, item) {
        this.$emit('delete-item', index, item);
      },
      toggleExpand(index, item) {
        this.$emit('toggle-expand', index, item);
      },
      formatDateTime(date) {
        // 假设这里有一个日期格式化的方法
        return new Date(date).toLocaleString();
      },
      handleButtonClick(){
        console.log('handleButtonClick');
      }
    },
  });
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>